import React, { Component,createRef } from 'react'
import withMouse from '@/hoc/withMouse'

class Position extends Component{
  render(){
    return (<>
      <div>x:{this.props.x},y:{this.props.y}</div>
    </>)
  } 
}

class Card extends Component{
  constructor(){
    super()
    this.boxRef=createRef()
  }
  componentDidUpdate(){
    this.boxRef.current.style.left=this.props.x+"px"
    this.boxRef.current.style.top=this.props.y+"px"
  }
  render(){
    return(<>
      <div style={{
        position:'absolute',
        width:'20px',
        height:'20px',
        backgroundColor:'red',
        borderRadius:'50%',    
    }}  ref={this.boxRef}></div>
    </>)
  }
}

const PositonHOC=withMouse(Position)

const CardHOC=withMouse(Card)
export default class App extends Component {
  render() {
    return (
      <div>
        <PositonHOC></PositonHOC>
        <CardHOC a={100}></CardHOC>
      </div>
    )
  }
}

